import { loadUrl } from '@/utils/Utils';
import * as React from 'react';
import { EditorModels } from '@/view/editor/ts/EditorModels';
import { IEditorAssets, assetsList } from '../data';
import './EditorAssect.scss';
import { EVENT_DRAG_TYPE, EnumDragType } from '../../EditorContent/EditorContent';

let image = new Image();
image.src = loadUrl('@/assets/image/icon-move.png');

export interface IEditorAssectProps {
  editorScene: EditorModels;
}

export default function EditorAssect(props: IEditorAssectProps) {
  /** 模型拖拽事件开始 */
  const modelDragStartHandle = (e: React.DragEvent<HTMLImageElement>, dragModel: IEditorAssets) => {
    e.dataTransfer.setDragImage(image, 16, 16);
    props.editorScene.$emit(EVENT_DRAG_TYPE, EnumDragType.MODEL_DRAG);
    props.editorScene.creatModelInPlane(dragModel.objUrl);
  };

  /** 模型拖拽事件结束 */
  const modelDragEndHandle = (e: React.DragEvent<HTMLImageElement>, dragModel: IEditorAssets) => {
    let currentCreateModel = props.editorScene.currentCreateModel;
    // 当前的要创建的模型，没有变成null的话，说明还需要，否则进行销毁
    if (currentCreateModel) {
      props.editorScene.disposeGroup(currentCreateModel);
      props.editorScene.currentCreateModel = null;
    }
  };
  return (
    <div className="editorAssect">
      {assetsList.map((item) => {
        return (
          <div className="itemBox" key={item.name}>
            <img
              src={item.imageUrl}
              onDragStart={(e) => {
                modelDragStartHandle(e, item);
              }}
              onDragEnd={(e) => {
                modelDragEndHandle(e, item);
              }}
              draggable="true"
            />
            <div className="name">{item.name}</div>
          </div>
        );
      })}
    </div>
  );
}
